<template>
	<view>
		<u-navbar :is-back="true" title="提现记录" back-text=''>
			<view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;">
				<!-- <view>
                <image @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/设 置.png" alt="">
                </view> -->
			</view>
		</u-navbar>

		<view>
			<view class="totle-price">
				<view class="totle-price-text">
					<span>{{selectTime}}{{dateType=="month"?"月":"日"}}提现：</span><span>¥{{deposit}}</span>
				</view>

				<view @click="selectTimeM" :style="{ display:'flex', justifyContent:'center' ,alignItems:'center' ,backgroundColor:'white', borderRadius:'5px',padding:'0.3rem' }">
					<image :style="{  width:'1rem',height:'1rem' }" src="../../style/image/stati/A33.png" alt="">
						<view :style="{ fontSize:'0.6rem', padding:'0rem 0rem 0rem 0.5rem' }">{{selectTime}}</view>
				</view>

			</view>
		</view>


		<view class="notesList" v-for="(item,index) in notesList " :key="index">

			<view class="notesList-child">
				<view class="note-top">
					<view style="
font-size: 0.77rem;
font-family: PingFang SC;
font-weight: 300;
color: #656565;">
						{{item.auditStatus==0?'提现中':''}}{{item.auditStatus==1?'提现中':''}}{{item.auditStatus==9?'提现失败':''}}</view>

					<view style="
font-size: 0.66rem;
font-family: PingFang SC;
font-weight: 300;
color: #656565;">{{item.createTime}}
						提现
					</view>
				</view>
				<view class="note-bottom">
					<view style="
font-size: 1rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;">￥{{item.auditMoney}}元</view>

					<view v-if="item.auditStatus==0" style="
font-size: 0.66rem;
font-family: PingFang SC;
font-weight: 300;
color: #656565;">预计2小时内到账</view>

					<view style="
font-size: 0.66rem;
font-family: PingFang SC;
font-weight: 300;
color: #656565;" v-else>{{item.auditTime}}</view>

				</view>
			</view>

		</view>


		<view style="margin-top:2rem;">
			<u-empty v-if="notesList.length==0" text="暂无数据" mode="data"></u-empty>
		</view>




		<u-popup v-model="popupShow" mode="bottom">


			<view>
				<view style="text-align: center;margin: 1rem 0rem 0rem 0rem;">请选择筛选类型:</view>

				<view class="classesifyP">

					<view class="classesify">
						<view :class="selectIfy==1?'classesify-puc':'classesify-pucs' " @click="pucM">按月</view>
						<!-- <view class="classesify-pucs" @click="pucM" v-else>代理12</view> -->

						<view class="classesify-buss" @click="busM" v-if="selectIfy == 2">按日</view>
						<view class="classesify-bus" @click="busM" v-else>按日</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-picker v-model="pickerShow" @confirm="pickerConfirm" mode="time"></u-picker>

		<u-select v-model="selectShow" :default-value=[10,10] mode="mutil-column" :list="list" @confirm="selectConfirm"></u-select>


	</view>

</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from 'vue-property-decorator'

	import {
		findProxyDrawMoneyList,
		findProxyDrawMoneySum
	} from "../../utils/uniApi";


	@Component({ //   @Component  是一个装修器   不可以在下面写语句
		name: 'test',
	})


	export default class extends Vue {

		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		}) msg!: string;


		public list = [
			[{
					value: '1',
					label: '2010'
				},
				{
					value: '2',
					label: '2011'
				},
				{
					value: '3',
					label: '2012'
				},
				{
					value: '4',
					label: '2013'
				},
				{
					value: '5',
					label: '2014'
				},
				{
					value: '6',
					label: '2015'
				},
				{
					value: '7',
					label: '2016'
				},
				{
					value: '8',
					label: '2017'
				},
				{
					value: '9',
					label: '2018'
				},
				{
					value: '10',
					label: '2019'
				},
				{
					value: '11',
					label: '2020'
				},
				{
					value: '12',
					label: '2021'
				},
			],
			[{
					value: '13',
					label: '1'
				},
				{
					value: '14',
					label: '2'
				},
				{
					value: '15',
					label: '3'
				},
				{
					value: '16',
					label: '4'
				},
				{
					value: '17',
					label: '5'
				},
				{
					value: '18',
					label: '6'
				},
				{
					value: '19',
					label: '7'
				},
				{
					value: '20',
					label: '8'
				},
				{
					value: '21',
					label: '9'
				},
				{
					value: '22',
					label: '10'
				},
				{
					value: '23',
					label: '11'
				},
				{
					value: '24',
					label: '12'
				},
			],

		]

		public notesList = [
			// {

			// },
			// {

			// },
			// {

			// }

		]

		public pageData = 1;

		public selectTime = "请选择日期";
		public repairLists: any = [];

		public selectIfy: any = 0;

		public show = false;

		public popupShow = false
		public pickerShow = false
		public selectShow = false

		public dateType = 'month' //month 按月查询,day 按天查询

		public deposit = ""

		created() {}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
			this.nowDate()


			this.accordingM()

			this.findProxyDrawMoneySum()

		}

		accordingM() {

			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				dateType: this.dateType, //month 按月查询,day 按天查询
				dateTime: this.selectTime, //	时间
				pageNo: this.pageData,
				pageSize: "10",
			}


			findProxyDrawMoneyList(params).then((res: any) => {

				console.log(res, 'jilu记录')

				this.notesList = res.data.data
			})


		}
		//提现合计
		findProxyDrawMoneySum() {
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				dateType: this.dateType, //month 按月查询,day 按天查询
				dateTime: this.selectTime, //	时间
				userType: "0"
			}
			findProxyDrawMoneySum(params).then((res: any) => {
				console.log(res, '提现记录')
				this.deposit = res.data.data
			})
		}
		nowDate() {

			let datas = new Date()

			function formatDate(datas: any) {
				var myyear = datas.getFullYear();
				var mymonth = datas.getMonth() + 1;
				var myweekday = datas.getDate();

				if (mymonth < 10) {
					mymonth = "0" + mymonth;
				}
				if (myweekday < 10) {
					myweekday = "0" + myweekday;
				}
				return (myyear + "-" + mymonth + "-" + myweekday);
			}

			console.log(formatDate(datas), '日期日期日期')

			this.selectTime = formatDate(datas).split('-')[0] + '-' + formatDate(datas).split('-')[1]

		}



		busM() {
			//方法中获取this
			this.selectIfy = 2;

			this.popupShow = false
			this.pickerShow = true

			setTimeout(() => {

				this.selectIfy = 0;
			}, 1000)
		}

		pucM() {
			console.log(12312312);
			this.selectIfy = 1;

			this.popupShow = false
			this.selectShow = true

			setTimeout(() => {

				this.selectIfy = 0;
			}, 1000)


		}


		pickerConfirm(data: any) {
			console.log('按日起', data)
			this.selectTime = data.year + '-' + data.month + '-' + data.day

			this.dateType = 'day'
			this.selectTime = data.year + '-' + data.month + '-' + data.day

			this.accordingM()


		}

		selectConfirm(data: any) {
			console.log(data)

			let str = (data[0] as any).label + '-' + (data[1] as any).label

			this.dateType = 'month'
			this.selectTime = str
			this.accordingM()

		}
		selectTimeM() {

			this.popupShow = !this.show;
		}


	}
</script>

<style lang="scss" scoped>
	.totle-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f3f5f7;
		padding: 0.2rem 0.5rem;
	}

	.totle-price-text {

		font-size: 0.73rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	.totle-price-text span {

		font-size: 0.73rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #000000;
	}

	.notesList {
		margin: 0.5rem;
		/* border-bottom: 1px solid #f2f2f2; */

	}

	.notesList-child {
		padding: 0.5rem;
		border-bottom: 1px solid #f2f2f2;

	}


	.note-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.note-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}



	.repairLists {
		background-color: white;
		margin-bottom: 1rem;
		border-radius: 0.2rem;
		/* padding: 1rem; */
		/* margin: 1rem; */
	}

	.repairLists-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem 0.5rem;
		border-bottom: 1px solid #e8e8e8;
	}

	.repairLists-child {
		border-bottom: 1px solid #e5e5e5;
	}

	.repairLists-head {
		padding: 1rem;
	}


	.classesifyP {
		text-align: center;
		display: flex;
		justify-content: center;

		padding: 1rem 1rem 3rem 1rem;
	}

	.classesify {
		width: 6rem;
		height: 1.8rem;
		border: 1px solid #02af74;

		display: flex;
		align-items: center;
		border-radius: 10px;
		/* //   background-color: red; */
	}

	.classesify-puc {
		width: 50%;
		font-size: 0.6rem;
		border-bottom-left-radius: 8px;
		border-top-left-radius: 8px;
		height: 100%;
		line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #02af74;
	}

	.classesify-pucs {
		width: 50%;
		font-size: 0.6rem;
		border-bottom-left-radius: 8px;
		border-top-left-radius: 8px;
		height: 100%;
		line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
	}

	.classesify-bus {
		width: 50%;
		font-size: 0.6rem;
	}

	.classesify-buss {
		width: 50%;
		font-size: 0.6rem;
		border-bottom-right-radius: 8px;
		border-top-right-radius: 8px;
		height: 100%;
		line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #02af74;
	}
</style>
